<template>
	<view class="pageMain" >
		
		<!-- <IndexHeader v-model="searchdata"
			@inputclear="searchdata = $event.clear"
			@confirm="confirm(searchdata)"></IndexHeader> -->
		
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="8000" :duration="800" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .6)" >
			<swiper-item  v-for="(item , index) in homeSlide" :key="index"   >
				<navigator class="swiper" :url="`/pages/sort/${item.urlimg}`">
					<image :src="item.img"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="pageBody">
			<!-- 分类菜单 -->
			<view class="swiperMenu">
				<navigator class="MenuNav"  v-for="(item , index) in swiperMenu" :key="index"   :url="`/pages/sort/${item.url}`">
					<view class="iconfont " :class="item.icon" :style="{'background': item.TypeColor}" ></view>
					<view class="MenuTitle">{{item.title}}</view>
				</navigator>
			</view>
		
			<!-- 目的地 -->
			<view class="local">
				<view class="titleBlock">
					<text class="iconfont  icon-retuijianyinqing"></text>
					{{ localTitle }}
					<view class="More" @click="localMoreUrl()">{{localMore}}</view>
				</view>
				<scroll-view class="localScroll" scroll-x="true" scroll-left="0" >
					<navigator class="localBlock" v-for="(item , index) in localList" :key="index" :url="`/pages/common/${item.localUrl}`">
						<image :src="item.localImg" :mode="item.mode" class="localImg">
						<view class="localName">
							{{item.cityName}}
							<text>{{item.EnglishName}}</text>
						</view>
					</navigator>
				</scroll-view>
			</view>
			
			<!-- 广告图 -->
				<navigator class="advert" v-for="(item , index) in advertisement" :key="index" :url="`/pages/common/${item.advertUrl}`">
					<image :src="item.advertImg" :mode="item.mode" class="advertImg">
				</navigator>
			
			
			<!-- 热门游记 -->
			<view class="listImg">
				<view class="titleBlock">
					<text class="iconfont  icon-retuijianyinqing"></text>
					{{ listTitle }}
					<view class="More" @click="moreUrl()">{{more}}</view>
				</view>
				<listBox :fallList="fallList"></listBox>
			</view>
		</view>
	</view>
</template>	

<script>
import IndexHeader from '@/components/search/index.vue'
import listBox from '@/components/fallList/list.vue'

export default {
	components:{
		IndexHeader,
		listBox
	}, 
	watch:{
		searchdata(){
			console.log(this.searchdata);
		},
	},
	data() {
		return {
			searchdata:'',
			inpit:'text',
			homeSlide:[],
			swiperMenu:[],
			localTitle:'热门目的地',
			localMore:'更多',
			localList:[],
			advertisement:[],
			listTitle:'热门游记',
			more:'更多',
			fallList:[]
		}
	},
	onLoad() {
		this.swiperData();
		this.menuData();
		this.localData();
		this.placeData();
		this.$forceUpdate() ;
		this.advertData();
	},
	methods: {
		//swiper轮播图
		swiperData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/swiperData',  
				//url:"/api/yilong888/jsonSrc/raw/master/homeSwiper.json",
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					// 将请求到的数据存放放到homeSlide中
					this.homeSlide = eval(res.data);
				}
			}); 
		}, 
		//菜单分类 数据
		menuData(){
			   uni.request({
				//url:"/api/yilong888/jsonSrc/raw/master/homeMenu.json",
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/menuData',  
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					// 将请求到的数据存放放到swiperMenu中
					this.swiperMenu = eval(res.data);
				}
			}); 
		}, 
		//目的地 数据
		localData(){
			   uni.request({
				//url:"/api/yilong888/jsonSrc/raw/master/homeLocal.json",
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/localData',  
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					// 将请求到的数据存放放到localList中
					this.localList = eval(res.data);
				}
			}); 
		}, 
		//广告图
		advertData(){
			uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/advertData',  
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					this.advertisement = eval(res.data);
				}
			}); 
		},
		//热门游记 数据
		placeData(){
			   uni.request({
				//url:"/api/yilong888/jsonSrc/raw/master/waflls.json",
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/mineList',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					console.log(res.data);
					// 将请求到的数据存放放到listing中038354
					this.fallList = eval(res.data);
				}
			}); 
		}, 
		//更多目的地
		localMoreUrl(e){
			uni.navigateTo({
				url:"/pages/more/index",
			});
		},
		//更多游记
		 moreUrl(e){
			console.log(e)
			// var newsid = e.currentTarget.dataset.newsid;
			uni.navigateTo({
				url:"/pages/more/index",
				// url:"../component/classdetails/classdetails?newsid="+ newsid,
				//success:res =>{},
			    // fail:() =>{},
				//complete:() => {}
			});
		},
		//搜索回车确定方法
		confirm(searchdata){
			if(searchdata){
				uni.showToast({
					title:this.searchdata,
					icon:'none',
					duration:500
				})
				uni.hideKeyboard()  //收起手机软键盘
			}else{
				uni.showToast({
					title:'请输入搜索内容！',
					icon:'none',
					duration:500
				})
			}}
	}
}
</script>

<style lang="scss">
@import "../../icon/iconfont.css";	
.pageMain{
	width: 100%;
	padding:0%;
.swiper {
  width: 100%;
  height: 400rpx;
  image {
    width: 100%;
    height: 100%;
    /* border-radius: 20rpx; */
  }
}
.pageBody{
	width: 96%;
	padding:0 2%;
	.swiperMenu {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  padding: 40rpx 0rpx 0;
	  justify-content: space-around;
	  align-items: center;
	  align-content: center;
	}

	.MenuNav {
	  width: 25%;
	  font-size: 26rpx;
	  text-align: center;
	  margin-bottom: 30rpx;
	  .iconfont {
		font-size: 80rpx;
		color: $uni-text-color-inverse;
		border-radius: 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		width: 70%;
		margin: 0 auto;
	  }
	  .MenuTitle{
		   color: $uni-text-color-grey;
		   padding-top: 20rpx;
		   letter-spacing: 2rpx;
	  }
	}
	.localScroll{
		width: 100%;
		white-space: nowrap;
		.localBlock{
			display:inline-block;
			width: 260rpx;
			height: 300rpx;
			margin-right: 30rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: $uni-border-radius-lg;
			}
			.localName{
				position: absolute;
				bottom: 10rpx;
				left: 20rpx;
				width: 100%;
				color: $uni-text-color-inverse;
				font-size: $uni-font-size-thirty;
				letter-spacing: $uni-spacing-row-xm;
				text{
					display: block;
					font-size: $uni-font-size-base;
				}
			}
			&:last-child{
				margin-right:0rpx;
			}
			}
		}
		.advert{
			width: 100%;
			height: 300rpx;
			margin: 40rpx 0 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 16px;
			}
		}
	}
}
</style>
